<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	#nav2{
		background-color: pink;
		position: fixed;;
		top:-50px;
		transition: all .3s linear;
	}
	#nav2.active{
		top:0px;
	}


	.navbar-default .navbar-nav>.active>a, 
	.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
		background-color: yellow;
	}

</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="70">
	
	<div class="container">
		<nav id="nav" class="navbar navbar-default nav-fixed-top" role="navigation">
			<div class="container-fluid">
				<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScroll">
					<ul class="nav navbar-nav">
						<li><a href="#iwen">@iwen</a></li>
						<li><a href="#ime">@ime</a></li>
						<li class="dropdown">
							<a href="#"class="dropdown-toggle" data-toggle="dropdown">下拉菜单
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu" role="dropdown">
								<li><a href="#one">11</a></li>
								<li><a href="#two">22</a></li>
								<li><a href="#three">33</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<nav id="nav2" class="navbar navbar-default " role="navigation">
			<div class="container-fluid">
				<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScroll">
					<ul class="nav navbar-nav">
						<li><a href="#iwen">@iwen</a></li>
						<li><a href="#ime">@ime</a></li>
						<li class="dropdown">
							<a href="#"class="dropdown-toggle" data-toggle="dropdown">下拉菜单
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu" role="dropdown">
								<li><a href="#one">11</a></li>
								<li><a href="#two">22</a></li>
								<li><a href="#three">33</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>

	<h2 id="iwen">@iwen</h2>
		<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><h1 id="one">oneoneoneone</h1><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>

<hr>
		<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><h1 >oneoneoneone</h1><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>

	<h2 id="ime">@ime</h2>
		<h2 id="two">twotwotwotwotwo</h2><p>这244是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个552p标签</p><p>这是一4个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p22222标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标
		2签</p><p>这是一个p标签</p><h3 id="three">threethreethree</h3><p>这是一个p标签</p>

	</div>





<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">

	window.addEventListener("scroll",function(){
		if(window.scrollY>=50){
			$("#nav2").addClass('active')
		}else{
			$("#nav2").removeClass('active')
		}
	})

	$('#myScroll').on("activate.bs.scrollspy",function(e){
		alert("触发 activate.bs.scrollspy 事件")
	})

</script>

</body>
</html>